<template>
  <div>
    <div>
      <el-card style="height: 67px">
        <el-form
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
          style="
            height: 59px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <el-form-item>
            <span class="sjzl">数据中心</span>
          </el-form-item>
          <el-form-item v-if="!staff">
            <el-select
              v-hasUserLevel="[null]"
              v-model="queryParams.districtIds"
              placeholder="请选择地区"
              size="mini"
              filterable
              clearable
              style="width: 150px; margin-right: 10px"
              @change="handleSelectChangeEnterprise"
            >
              <el-option
                v-for="(item, index) in areaList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-hasUserLevel="[null, '5', '6']"
              v-model="queryParams.enterpriseId"
              size="mini"
              :clearable="true"
              filterable
              placeholder="请选择油企"
              style="width: 150px; margin-right: 10px"
              @change="handleSelectChange"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :value="item.enterpriseId"
                :label="item.enterpriseName"
              ></el-option>
            </el-select>
            <el-select
              v-hasUserLevel="[null, '1', '5', '6']"
              v-model="queryParams.stationId"
              size="mini"
              :clearable="true"
              filterable
              placeholder="请选择油站"
              style="width: 150px; margin-right: 10px"
            >
              <el-option
                v-for="item in stationList"
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationId"
              >
              </el-option>
            </el-select>

            <!-- 查询时间按钮 今天 昨天 本周 本月 自定义。  0 代表未选中  1代表选中
              timeBuutonInfo.homeAll 全部  所有时间范围内都可以查看。
            -->
            <div
              v-hasUserLevel="[null, '1', '2', '5', '6', '7']"
              style="display: inline-block"
            >
              <el-button
                size="mini"
                @click="queryData(0)"
                v-if="
                  timeBuutonInfo.homeAll === '1' ||
                  timeBuutonInfo.homeToday === '1'
                "
              >
                今天
              </el-button>
              <el-button
                size="mini"
                @click="queryData(1)"
                v-if="
                  timeBuutonInfo.homeAll === '1' ||
                  timeBuutonInfo.homeYesterday === '1'
                "
              >
                昨天
              </el-button>
              <el-button
                size="mini"
                @click="queryData(2)"
                :disabled="stationIdDisabled"
                v-if="
                  timeBuutonInfo.homeAll === '1' ||
                  timeBuutonInfo.homeWeek === '1'
                "
              >
                本周
              </el-button>
              <el-button
                size="mini"
                @click="queryData(3)"
                :disabled="stationIdDisabled"
                v-if="
                  timeBuutonInfo.homeAll === '1' ||
                  timeBuutonInfo.homeMonth === '1'
                "
              >
                本月
              </el-button>
              <el-button
                v-show="
                  timeBuutonInfo.homeAll === '1' ||
                  timeBuutonInfo.homeCustom === '1'
                "
                size="mini"
                @click="
                  (handleisCustom) => {
                    this.isCustom = true;
                  }
                "
                :disabled="stationIdDisabled"
              >
                自定义
              </el-button>
              <!-- <el-button
                v-show="
                  !isCustom ||
                  timeBuutonInfo.homeAll === '1' ||
                  timeBuutonInfo.homeCustom === '1'
                "
                size="mini"
                @click="
                  (handleisCustom) => {
                    this.isCustom = true;
                  }
                "
                :disabled="stationIdDisabled"
              >
                自定义
              </el-button> -->
            </div>
            <el-date-picker
              v-if="isCustom"
              size="mini"
              style="margin: 0px 10px; width: 230px"
              v-model="dateRangeCreatedDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
            <!-- <el-date-picker
              v-if="isCustom"
              style="margin: 0px 10px; width: 230px"
              v-model="dateRangeCreatedDate"
              type="daterange"
              value-format="yyyy-MM-dd"
              size="mini"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker> -->
            <el-button
              v-show="this.isCustom"
              type="primary"
              size="mini"
              @click="queryData(4)"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="sum_index">
      <el-row
        type="flex"
        justify="space-around"
        :gutter="10"
        style="padding: 0px 5px"
      >
        <el-col :span="6">
          <el-card class="box-card">
            <div class="sjzl-box">
              <div class="sjzl-left-logo">
                <img
                  class="sjzl-left-logo-img"
                  src="../../assets/image_login/图层 7@3x.png"
                  alt=""
                />
                <span class="sjzl-left-logo-text">营业总额(元)</span>
              </div>
              <div class="sjzl-right-text">
                <el-tooltip
                  :content="data.rechargeAndPayAmt + ''"
                  placement="bottom"
                  effect="light"
                >
                  <div class="number-text">{{ data.rechargeAndPayAmt }}</div>
                </el-tooltip>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div class="sjzl-box">
              <div class="sjzl-left-logo">
                <img
                  class="sjzl-left-logo-img"
                  src="../../assets/image_login/图层 8@3x.png"
                  alt=""
                />
                <span class="sjzl-left-logo-text">订单金额(元)</span>
              </div>
              <div class="sjzl-right-text">
                <el-tooltip
                  :content="data.refuelingAmt + ''"
                  placement="bottom"
                  effect="light"
                >
                  <div class="number-text">{{ data.refuelingAmt }}</div>
                </el-tooltip>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div class="sjzl-box">
              <div class="sjzl-left-logo">
                <img
                  class="sjzl-left-logo-img"
                  src="../../assets/image_login/图层 9@3x.png"
                  alt=""
                />
                <span class="sjzl-left-logo-text">充值金额(元)</span>
              </div>
              <div class="sjzl-right-text">
                <el-tooltip
                  :content="data.rechargeAmt + ''"
                  placement="bottom"
                  effect="light"
                >
                  <div class="number-text">{{ data.rechargeAmt }}</div>
                </el-tooltip>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div class="sjzl-box">
              <div class="sjzl-left-logo">
                <img
                  class="sjzl-left-logo-img"
                  src="../../assets/image_login/图层 10@3x.png"
                  alt=""
                />
                <span class="sjzl-left-logo-text">订单笔数</span>
              </div>
              <div class="sjzl-right-text">
                <el-tooltip
                  :content="data.orderAmt + ''"
                  placement="bottom"
                  effect="light"
                >
                  <div class="number-text">{{ data.orderAmt }}</div>
                </el-tooltip>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div class="charts-box">
        <div class="charts-left">
          <el-card>
            <div>
              <el-form
                ref="queryForm"
                :inline="true"
                v-show="showSearch"
                label-width="68px"
                style="
                  width: 100%;
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                "
              >
                <el-form-item>
                  <span class="sjzl">支付分布</span>
                </el-form-item>
              </el-form>
            </div>
            <div class="charts-left-right">
              <div
                class="fl"
                v-for="(item, index) in data.payTypePercentage"
                :key="index"
              >
                <div class="icon">
                  <img
                    v-show="item.name === '微信支付'"
                    src="../../assets/image_login/微信.png"
                    alt=""
                  />
                  <img
                    v-show="item.name === '支付宝支付'"
                    src="../../assets/image_login/支付宝 .png"
                    alt=""
                  />
                  <img
                    v-show="item.name === '电子卡支付'"
                    src="../../assets/image_login/电子卡.png"
                    alt=""
                  />
                  <img
                    v-show="item.name === '现金支付'"
                    src="../../assets/image_login/现金.png"
                    alt=""
                  />
                  <img
                    v-show="item.name === 'POS机支付'"
                    src="../../assets/image_login/银行卡.png"
                    alt=""
                  />
                  <img
                    v-show="item.name === '银行卡支付'"
                    src="../../assets/image_login/yinxingqia2.png"
                    alt=""
                  />
                  <img
                    v-show="item.name === '车队卡支付'"
                    src="../../assets/image_login/车队卡.png"
                    alt=""
                  />
                  <img
                    v-show="item.name === '实体卡支付'"
                    src="../../assets/image_login/实体卡.png"
                    alt=""
                  />
                </div>
                <div class="text">
                  <div>
                    <div class="num">{{ item.paycount }}</div>
                    <div class="num-name">{{ item.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="charts-body">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-card>
                <div class="charts-body-item">
                  <div class="charts-item-top">近7日交易趋势图</div>
                  <div class="charts-item-bottom">
                    <histogram :optionsSeries="data.series"></histogram>
                    <!-- <div
                      class="item-bottom-text"
                      v-for="item in data.oilSaleNumList"
                    >
                      <div class="item-bottom-a">{{ item.oilName }}：</div>
                      <div class="item-bottom-b">{{ item.orderLiters }}</div>
                    </div> -->
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                <div class="charts-body-item">
                  <div class="charts-item-top">会员数量</div>
                  <div class="charts-item-bottom-hy">
                    <div style="text-align: center">
                      <span class="charts-item-bottom-hy-text">
                        {{ data.memberNum.allMemberNum }}
                      </span>
                      <div class="charts-item-bottom-hy-nb">会员数量</div>
                    </div>
                    <div style="text-align: center">
                      <span class="charts-item-bottom-hy-text">
                        {{ data.memberNum.todayMemberNum }}
                      </span>
                      <div class="charts-item-bottom-hy-nb">今日新增</div>
                    </div>
                    <div style="text-align: center">
                      <span class="charts-item-bottom-hy-text">
                        {{ data.memberNum.superMemberNum }}
                      </span>
                      <div class="charts-item-bottom-hy-nb">超级会员</div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                <div class="charts-body-item">
                  <div class="charts-item-top">常用菜单</div>
                  <el-row style="margin-top: 27px">
                    <el-col :span="6">
                      <div>
                        <img
                          @click="orderAll"
                          class="charts-item-bottom-img"
                          src="../../assets/image_login/图层 11@3x.png"
                          alt=""
                        />
                        <div @click="orderAll" class="charts-item-bottom-text">
                          今日订单
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div>
                        <img
                          @click="overviewWorkSummary"
                          class="charts-item-bottom-img"
                          src="../../assets/image_login/图层 12@3x.png"
                          alt=""
                        />
                        <div
                          @click="overviewWorkSummary"
                          class="charts-item-bottom-text"
                        >
                          油站班结
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div>
                        <img
                          @click="customerCardDzkBill"
                          class="charts-item-bottom-img"
                          src="../../assets/image_login/图层 13@3x.png"
                          alt=""
                        />
                        <div
                          @click="customerCardDzkBill"
                          class="charts-item-bottom-text"
                        >
                          余额查询
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div>
                        <img
                          @click="customerPointPointBill"
                          class="charts-item-bottom-img"
                          src="../../assets/image_login/图层 14@3x.png"
                          alt=""
                        />
                        <div
                          @click="customerPointPointBill"
                          class="charts-item-bottom-text"
                        >
                          积分扣减
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  homeSumQuery,
  employeePermission,
  getEnterpriseByDistrict,
  getStationByEnterprise,
} from "@/api/dataSource/saleReport";
import { enterpriseList } from "@/api/station/orderHistory";
import { employeeSign } from "@/api/dept";
import { getHomePageTimeSettingListApi } from "@/api/system/permissionSetting";
import histogram from "@/components/Charts/histogram.vue";
import lodash from "lodash";

export default {
  components: { histogram },
  name: "Overview_Summary",
  data() {
    return {
      stationIdDisabled: false,
      // 显示自定义搜索
      isCustom: false,
      // 显示搜索条件
      showSearch: true,
      dateRangeCreatedDate: [],
      // 数据概览 和 收入概览
      form: [
        {
          zongAmt: 0, // 总金额
          zongliters: 0, // 总销量
          qyamt: 0, // 汽油金额
          cyamt: 0, // 柴油金额
          qyliters: 0, // 汽油升数
          cyliters: 0,
          wxAmt: 0,
          dzkAmt: 0,
          zfbAmt: 0,
          xjAmt: 0,
          didiAppAmt: 0,
          tyAppAmt: 0,
          otherAmt: 0,
          memberAmt: 0,
          posAmt: 0,
          czAmt: 0,
          receiveAmt: 0,
        },
      ],
      //到账金额

      formReceive: [
        {
          zongAmt: 0, // 总金额
          zongliters: 0, // 总销量
          qyamt: 0, // 汽油金额
          cyamt: 0, // 柴油金额
          qyliters: 0, // 汽油升数
          cyliters: 0,
          wxAmt: 0,
          dzkAmt: 0,
          zfbAmt: 0,
          xjAmt: 0,
          didiAppAmt: 0,
          tyAppAmt: 0,
          otherAmt: 0,
          memberAmt: 0,
          posAmt: 0,
          czAmt: 0,
          receiveAmt: 0,
        },
      ],
      data: { memberNum: {} },
      // 实收金额
      ssAmt: 0,
      // 加油总量
      otalRefuelingAmt: 0,
      // 加油金额
      refuelingAmt: 0,
      // 笔数
      orderAmt: 0,
      staff: false, // 是否是员工
      areaList: [
        {
          label: "华北地区",
          value: "1",
        },
        {
          label: "华南地区",
          value: "2",
        },
        {
          label: "西南地区",
          value: "3",
        },
        {
          label: "西北地区",
          value: "4",
        },
        {
          label: "东北地区",
          value: "5",
        },
      ],
      queryParams: {
        stationId: null,
        enterpriseId: null,
      },
      enterpriseList: [],
      stationList: [],
      timeBuutonInfo: {}, // 查询时间按钮信息
    };
  },
  created() {
    this.queryData(0);
    let userLevel = this.$store.state.user.userLevel;
    if (["1", "5", "6"].includes(userLevel)) {
      this.getEnterpriseList();
    }
    if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
      this.getStationList(this.presentEnterprise.enterpriseId);
    }
    this.getHomePageTimeSetting();
  },
  methods: {
    // 判断等级
    getUserLevel() {
      let userLevel = this.$store.state.user.userLevel;
      if (["5", "6"].includes(userLevel)) {
        return false;
      } else {
        return true;
      }
    },

    // 跳转今日订单
    orderAll: lodash.debounce(function () {
      console.log("跳转今日订单跳转今日订单");
      this.$router.replace({
        path: "order/Order_All",
      });
    }, 500),

    // 跳转油站班结
    overviewWorkSummary: lodash.debounce(function () {
      if (this.getUserLevel()) {
        this.$router.replace({
          path: "banjie/Overview_WorkSummary",
        });
      }
    }, 500),

    // 跳转余额查询
    customerCardDzkBill: lodash.debounce(function () {
      if (this.getUserLevel()) {
        employeeSign().then((res) => {
          if (res.msg === "0") {
            this.$router.replace({
              path: "customer/card/Dzk_Electroic_Card",
            });
          }
        });
      }
    }, 500),

    // 跳转积分查询
    customerPointPointBill: lodash.debounce(function () {
      if (this.getUserLevel()) {
        employeeSign().then((res) => {
          if (res.msg === "0") {
            this.$router.replace({
              path: "customer/point/Point_Change",
            });
          }
        });
      }
    }, 500),

    // 选择地区查询油企
    handleSelectChangeEnterprise(value) {
      this.enterpriseList = [];
      this.stationList = [];
      this.queryParams.enterpriseId = null;
      this.queryParams.stationId = null;
      if (value) {
        this.getEnterpriseList(value);
      }
    },
    // 选择油企查询油站
    handleSelectChange(value) {
      this.stationList = [];
      this.queryParams.stationId = null;
      if (value) {
        this.getStationList(value);
      }
    },
    // 查询油企
    getEnterpriseList(value) {
      let data = {};
      if (value) {
        data.district = value;
      }
      getEnterpriseByDistrict(data).then((res) => {
        this.enterpriseList = res.data || [];
      });
    },
    // 获取油站
    getStationList(val) {
      getStationByEnterprise({ enterpriseId: val }).then((res) => {
        this.stationList = res.data || [];
      });
    },

    // 获取当前账号拥有哪些查询时间范围
    async getHomePageTimeSetting() {
      const userId = this.$store.state.user.userId;
      const res = await getHomePageTimeSettingListApi({ userId: userId });
      const obj = {
        homeAll: res.data.homeAll,
        homeCustom: res.data.homeCustom,
        homeMonth: res.data.homeMonth,
        homeToday: res.data.homeToday,
        homeWeek: res.data.homeWeek,
        homeYesterday: res.data.homeYesterday,
      };
      this.timeBuutonInfo = obj;
      console.log("时间--", res, obj);
    },

    // 查询数据
    async queryData(type) {
      let day;
      this.reset();
      this.isCustom = false;
      let query = {
        beginTime: null,
        endTime: null,
      };
      let userLevel = this.$store.state.user.userLevel;
      if (["1", "2", "5", "6"].includes(userLevel)) {
        query.isDeleted = 0;
      }
      switch (type) {
        case 0: // 今日
          query.beginTime = this.dateCalculate() + " " + "00:00:00";
          query.endTime = this.dateCalculate() + " " + "23:59:59";
          break;
        case 1: // 昨天
          query.beginTime = this.dateCalculate(-1) + " " + "00:00:00";
          query.endTime = this.dateCalculate(-1) + " " + "23:59:59";
          break;
        case 2: // 本周
          day = new Date().getDay();
          day = day === 0 ? 7 : day;
          day = -(day - 1);
          query.beginTime = this.dateCalculate(day) + " " + "00:00:00";
          query.endTime = this.dateCalculate() + " " + "23:59:59";
          break;
        case 3: // 本月
          day = new Date().getDay();
          let datetime = new Date();
          let month = new Date().getMonth() + 1;
          if (month < 10) month = `0${month}`;
          query.beginTime =
            datetime.getFullYear() + "-" + month + "-01" + " " + "00:00:00";
          //query.beginTime = this .dateCalculate(day);
          query.endTime = this.dateCalculate() + " " + "23:59:59";
          break;
        case 4: // 指定日期
          if (this.dateRangeCreatedDate == null) {
            this.dateRangeCreatedDate = [];
          }
          query.beginTime = this.dateRangeCreatedDate[0];
          query.endTime = this.dateRangeCreatedDate[1];
        default:
      }

      if (!query.beginTime && !query.endTime)
        return this.$message.error("开始时间和结束时间不能为空");

      let data = await employeePermission();
      this.staff = data.data.staff;
      query = Object.assign(query, this.queryParams);
      this.getData(query);
    },
    // 获取数据
    getData(query) {
      homeSumQuery(query).then((res) => {
        if (res && res.code === 200) {
          console.log(123, res.data);
          this.data = res.data;
          this.data.datamemberNum = res.data.datamemberNum;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    dateCalculate(num = 0, date = false) {
      if (!date) {
        date = new Date(); //没有传入值时,默认是当前日期
        date =
          date.getFullYear() +
          "-" +
          (date.getMonth() + 1) +
          "-" +
          date.getDate();
      }
      date += " 00:00:00"; //设置为当天凌晨12点
      date = date.replace(/-/g, "/");
      date = Date.parse(new Date(date)) / 1000; //转换为时间戳
      date += 86400 * num; //修改后的时间戳
      var newDate = new Date(parseInt(date) * 1000); //转换为时间
      let month = newDate.getMonth() + 1;
      let sun = newDate.getDate();
      if (month < 10) month = `0${month}`;
      if (sun < 10) sun = `0${sun}`;
      return `${newDate.getFullYear()}-${month}-${sun}`;
    },
    // 表单重置
    reset() {
      this.form[0] = {
        zongAmt: 0,
        zongliters: 0,
        qyamt: 0,
        cyamt: 0,
        qyliters: 0,
        cyliters: 0,
        wxAmt: 0,
        dzkAmt: 0,
        zfbAmt: 0,
        xjAmt: 0,
        didiAppAmt: 0,
        tyAppAmt: 0,
        otherAmt: 0,
        memberAmt: 0,
        posAmt: 0,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
@media (max-width: 1366px) {
  .charts-item-bottom-grid {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
    height: 59px;
  }
  .charts-item-bottom-grid::-webkit-scrollbar {
    display: none;
  }

  .charts-item-bottom-text {
    width: 72px;
    height: 18px;
    font-size: 15px;
    font-family: PingFang SC;
    color: #000000;
    margin-right: 50px;
  }

  .charts-item-bottom-img {
    margin-top: 15px;
    width: 50px;
    height: 50px;
  }

  .charts-body {
    padding: 5px;

    .charts-body-item {
      height: 160px;

      .charts-item-top {
        height: 20px;
        font-size: 21px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
        margin: 8px 0px 18px 0px;
      }

      .charts-item-bottom-hy {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 65px;
      }
      .charts-item-bottom-hy-text {
        width: 40px;
        height: 14px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #4092fb;
      }
      .charts-item-bottom-hy-nb {
        width: 72px;
        height: 18px;
        font-size: 16px;
        font-family: PingFang SC;
        color: #000000;
      }
      .charts-item-bottom {
        width: 100%;
        height: 100px;

        .item-bottom-text {
          width: 33%;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          line-height: 37px;
          margin-top: 15px;

          .item-bottom-a {
            height: 20px;
            font-size: 19px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #000000;
          }
          .item-bottom-b {
            font-size: 19px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #4092fb;
          }
        }
      }
    }
  }

  .sum_index {
    width: 100%;
    padding: 0 30px 0 15px;
  }

  .panel-group {
    padding: 0;
  }

  .flex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 170px;
    flex-direction: column;
  }

  .xiaoliang {
    background-image: url("../../assets/image/bj-1.png");
    background-size: 100% 100%;
  }

  .xiaoe {
    background-image: url("../../assets/image/bj-02.png");
    background-size: 100% 100%;
  }

  .qiyou {
    background-image: url("../../assets/image/bj-3.png");
    background-size: 100% 100%;
  }

  .chaiyou {
    background-image: url("../../assets/image/bj-4.png");
    background-size: 100% 100%;
  }

  .flex-qy {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-qy-sx {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .panel-group {
    padding-left: 10px;
  }

  .flex-sr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
  }

  .sr-font {
    font-size: 20px;
    color: #f4a645;
  }

  .box-card {
    height: 165px;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 27px 0px rgba(178, 182, 187, 0.1);
    margin-top: 10px;
    padding: 0px;
  }

  .sjzl {
    width: 83px;
    height: 21px;
    font-size: 21px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 21px;
    margin-left: 10px;
  }

  ::v-deep .el-form-item {
    margin-bottom: 0 !important;
  }

  .sjzl-box {
    height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    .sjzl-left-logo {
      height: 25px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0px;

      .sjzl-left-logo-img {
        width: 25px;
        height: 25px;
      }
    }
    .sjzl-left-logo-text {
      text-align: center;
      height: 21px;
      line-height: 21px;
      font-size: 21px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
      margin-left: 5px;
      padding-right: 5px;
    }
    .sjzl-right-text {
      width: 100%;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        width: 100%;
        height: 16px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 80px;
      }
      .number-text {
        height: 50px;
        font-size: 42px;
        font-family: PingFang SC;
        font-weight: 600;
        margin-bottom: 10px;
      }
      .number {
        margin-top: 10px;
        height: 18px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #c7c7c7;
        line-height: 18px;
      }
    }
  }

  .charts-box {
    width: 100%;
    margin-top: 10px;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;

    .charts-left {
      flex: 1;
      padding: 5px;

      .charts-left-right {
        height: 75px;
        flex: 1;
        display: flex;
        flex-direction: row;

        .fl {
          flex: 1;
          // border: 1px solid red;
          margin-top: 15px;
          display: flex;

          .icon {
            width: 54px;
            height: 54px;

            img {
              width: 55px;
              height: 55px;
            }
          }

          .text {
            flex: 1;
            padding-left: 8px;
            .num-name {
              height: 18px;
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #000000;
              margin-top: 15px;
            }
            .num {
              width: 66px;
              height: 14px;
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #4092fb;
            }
          }
        }
      }
    }

    .charts-right {
      width: 100%;
      flex: 1;
      padding: 5px;
    }
  }
}

@media (min-width: 1366px) {
  .charts-item-bottom-grid {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
    height: 59px;
  }
  .charts-item-bottom-grid::-webkit-scrollbar {
    display: none;
  }

  .charts-item-bottom-text {
    width: 72px;
    height: 18px;
    font-size: 15px;
    font-family: PingFang SC;
    color: #000000;
    margin-right: 50px;
  }

  .charts-item-bottom-img {
    margin-top: 15px;
    width: 50px;
    height: 50px;
  }

  .charts-body {
    padding: 5px;

    .charts-body-item {
      height: 160px;

      .charts-item-top {
        height: 20px;
        font-size: 21px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
        margin: 8px 0px 18px 0px;
      }

      .charts-item-bottom-hy {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 65px;
      }
      .charts-item-bottom-hy-text {
        width: 40px;
        height: 14px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #4092fb;
      }
      .charts-item-bottom-hy-nb {
        width: 72px;
        height: 18px;
        font-size: 16px;
        font-family: PingFang SC;
        color: #000000;
      }
      .charts-item-bottom {
        width: 100%;
        height: 100px;

        .item-bottom-text {
          width: 33%;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          line-height: 37px;
          margin-top: 15px;

          .item-bottom-a {
            height: 20px;
            font-size: 19px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #000000;
          }
          .item-bottom-b {
            font-size: 19px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #4092fb;
          }
        }
      }
    }
  }

  .sum_index {
    width: 100%;
    padding: 0 30px 0 15px;
  }

  .panel-group {
    padding: 0;
  }

  .flex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 170px;
    flex-direction: column;
  }

  .xiaoliang {
    background-image: url("../../assets/image/bj-1.png");
    background-size: 100% 100%;
  }

  .xiaoe {
    background-image: url("../../assets/image/bj-02.png");
    background-size: 100% 100%;
  }

  .qiyou {
    background-image: url("../../assets/image/bj-3.png");
    background-size: 100% 100%;
  }

  .chaiyou {
    background-image: url("../../assets/image/bj-4.png");
    background-size: 100% 100%;
  }

  .flex-qy {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-qy-sx {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .panel-group {
    padding-left: 10px;
  }

  .flex-sr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
  }

  .sr-font {
    font-size: 20px;
    color: #f4a645;
  }

  .box-card {
    height: 165px;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 27px 0px rgba(178, 182, 187, 0.1);
    margin-top: 10px;
    padding: 0px;
  }

  .sjzl {
    width: 83px;
    height: 21px;
    font-size: 21px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 21px;
    margin-left: 10px;
  }

  ::v-deep .el-form-item {
    margin-bottom: 0 !important;
  }

  .sjzl-box {
    height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .sjzl-left-logo {
      height: 25px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0px;

      .sjzl-left-logo-img {
        width: 25px;
        height: 25px;
      }
    }
    .sjzl-left-logo-text {
      text-align: center;
      height: 21px;
      line-height: 21px;
      font-size: 21px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
      margin-left: 5px;
      padding-right: 5px;
    }
    .sjzl-right-text {
      width: 100%;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        width: 100%;
        height: 16px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 80px;
      }
      .number-text {
        height: 50px;
        font-size: 42px;
        font-family: PingFang SC;
        font-weight: 600;
        margin-bottom: 10px;
      }
      .number {
        margin-top: 10px;
        height: 18px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #c7c7c7;
        line-height: 18px;
      }
    }
  }

  .charts-box {
    width: 100%;
    margin-top: 10px;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;

    .charts-left {
      flex: 1;
      padding: 5px;

      .charts-left-right {
        height: 75px;
        flex: 1;
        display: flex;
        flex-direction: row;

        .fl {
          flex: 1;
          // border: 1px solid red;
          margin-top: 15px;
          display: flex;

          .icon {
            width: 54px;
            height: 54px;

            img {
              width: 55px;
              height: 55px;
            }
          }

          .text {
            flex: 1;
            padding-left: 8px;
            .num-name {
              height: 18px;
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #000000;
              margin-top: 15px;
            }
            .num {
              width: 66px;
              height: 14px;
              font-size: 19px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #4092fb;
            }
          }
        }
      }
    }

    .charts-right {
      width: 100%;
      flex: 1;
      padding: 5px;
    }
  }
}

@media (min-width: 1440px) {
  .charts-item-bottom-grid {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
    height: 59px;
  }
  .charts-item-bottom-grid::-webkit-scrollbar {
    display: none;
  }

  .charts-item-bottom-text {
    width: 72px;
    height: 18px;
    font-size: 16px;
    font-family: PingFang SC;
    color: #000000;
    margin-right: 50px;
  }

  .charts-item-bottom-img {
    margin-top: 15px;
    width: 50px;
    height: 50px;
  }

  .charts-body {
    padding: 5px;

    .charts-body-item {
      height: 180px;

      .charts-item-top {
        height: 20px;
        font-size: 21px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
        margin: 8px 0px 18px 0px;
      }

      .charts-item-bottom-hy {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 65px;
      }
      .charts-item-bottom-hy-text {
        width: 40px;
        height: 14px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #4092fb;
      }
      .charts-item-bottom-hy-nb {
        width: 72px;
        height: 18px;
        font-size: 17px;
        font-family: PingFang SC;

        color: #000000;
      }
      .charts-item-bottom {
        width: 100%;
        height: 100px;

        .item-bottom-text {
          width: 33%;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          line-height: 37px;
          margin-top: 15px;

          .item-bottom-a {
            height: 20px;
            font-size: 19px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #000000;
          }
          .item-bottom-b {
            font-size: 19px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #4092fb;
          }
        }
      }
    }
  }

  .sum_index {
    width: 100%;
    padding: 0 30px 0 15px;
  }

  .panel-group {
    padding: 0;
  }

  .flex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 170px;
    flex-direction: column;
  }

  .xiaoliang {
    background-image: url("../../assets/image/bj-1.png");
    background-size: 100% 100%;
  }

  .xiaoe {
    background-image: url("../../assets/image/bj-02.png");
    background-size: 100% 100%;
  }

  .qiyou {
    background-image: url("../../assets/image/bj-3.png");
    background-size: 100% 100%;
  }

  .chaiyou {
    background-image: url("../../assets/image/bj-4.png");
    background-size: 100% 100%;
  }

  .flex-qy {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-qy-sx {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .panel-group {
    padding-left: 10px;
  }

  .flex-sr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
  }

  .sr-font {
    font-size: 20px;
    color: #f4a645;
  }

  .box-card {
    height: 165px;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 27px 0px rgba(178, 182, 187, 0.1);
    margin-top: 10px;
    padding: 0px;
  }

  .sjzl {
    width: 83px;
    height: 21px;
    font-size: 21px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 21px;
    margin-left: 10px;
  }

  ::v-deep .el-form-item {
    margin-bottom: 0 !important;
  }

  .sjzl-box {
    height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .sjzl-left-logo {
      height: 25px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0px;

      .sjzl-left-logo-img {
        width: 25px;
        height: 25px;
      }
    }
    .sjzl-left-logo-text {
      text-align: center;
      height: 21px;
      line-height: 21px;
      font-size: 21px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
      margin-left: 5px;
      padding-right: 5px;
    }
    .sjzl-right-text {
      width: 100%;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        width: 100%;
        height: 16px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 80px;
      }
      .number-text {
        height: 50px;
        font-size: 44px;
        font-family: PingFang SC;
        font-weight: 600;
        margin-bottom: 10px;
      }
      .number {
        margin-top: 15px;
        margin-top: 15px;
        height: 18px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #c7c7c7;
        line-height: 18px;
      }
    }
  }

  .charts-box {
    width: 100%;
    margin-top: 10px;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;

    .charts-left {
      flex: 1;
      padding: 5px;

      .charts-left-right {
        height: 75px;
        flex: 1;
        display: flex;
        flex-direction: row;

        .fl {
          flex: 1;
          // border: 1px solid red;
          margin-top: 15px;
          display: flex;

          .icon {
            width: 54px;
            height: 54px;

            img {
              width: 55px;
              height: 55px;
            }
          }

          .text {
            flex: 1;
            padding-left: 8px;
            .num-name {
              height: 18px;
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #000000;
              margin-top: 15px;
            }
            .num {
              width: 66px;
              height: 14px;
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #4092fb;
            }
          }
        }
      }
    }

    .charts-right {
      width: 100%;
      flex: 1;
      padding: 5px;
    }
  }
}

@media (min-width: 1680px) {
  .charts-item-bottom-grid {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
    height: 59px;
  }
  .charts-item-bottom-grid::-webkit-scrollbar {
    display: none;
  }

  .charts-item-bottom-text {
    width: 72px;
    height: 18px;
    font-size: 17px;
    font-family: PingFang SC;
    color: #000000;
  }

  .charts-item-bottom-img {
    margin-top: 10px;
    width: 60px;
    height: 60px;
  }

  .charts-body {
    padding: 5px;

    .charts-body-item {
      height: 200px;
      margin-left: 10px;

      .charts-item-top {
        height: 20px;
        font-size: 21px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
        margin: 8px 0px 18px 0px;
      }

      .charts-item-bottom-hy {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 65px;
      }
      .charts-item-bottom-hy-text {
        width: 40px;
        height: 14px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #4092fb;
      }
      .charts-item-bottom-hy-nb {
        width: 72px;
        height: 18px;
        font-size: 18px;
        font-family: PingFang SC;
        color: #000000;
      }
      .charts-item-bottom {
        width: 100%;
        height: 100px;

        .item-bottom-text {
          width: 33%;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          line-height: 37px;
          margin-top: 15px;

          .item-bottom-a {
            height: 20px;
            font-size: 21px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #000000;
          }
          .item-bottom-b {
            font-size: 21px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #4092fb;
          }
        }
      }
    }
  }

  .sum_index {
    width: 100%;
    padding: 0 30px 0 15px;
  }

  .panel-group {
    padding: 0;
  }

  .flex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 170px;
    flex-direction: column;
  }

  .xiaoliang {
    background-image: url("../../assets/image/bj-1.png");
    background-size: 100% 100%;
  }

  .xiaoe {
    background-image: url("../../assets/image/bj-02.png");
    background-size: 100% 100%;
  }

  .qiyou {
    background-image: url("../../assets/image/bj-3.png");
    background-size: 100% 100%;
  }

  .chaiyou {
    background-image: url("../../assets/image/bj-4.png");
    background-size: 100% 100%;
  }

  .flex-qy {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-qy-sx {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .panel-group {
    padding-left: 10px;
  }

  .flex-sr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
  }

  .sr-font {
    font-size: 20px;
    color: #f4a645;
  }

  .box-card {
    height: 165px;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 27px 0px rgba(178, 182, 187, 0.1);
    margin-top: 10px;
    padding: 0px;
  }

  .sjzl {
    width: 83px;
    height: 21px;
    font-size: 21px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 21px;
    margin-left: 10px;
  }

  ::v-deep .el-form-item {
    margin-bottom: 0 !important;
  }

  .sjzl-box {
    height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .sjzl-left-logo {
      height: 25px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0px;

      .sjzl-left-logo-img {
        width: 25px;
        height: 25px;
      }
    }
    .sjzl-left-logo-text {
      text-align: center;
      height: 21px;
      line-height: 21px;
      font-size: 21px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
      margin-left: 5px;
      padding-right: 5px;
    }
    .sjzl-right-text {
      width: 100%;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        width: 100%;
        height: 16px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 80px;
      }
      .number-text {
        height: 50px;
        font-size: 46px;
        font-family: PingFang SC;
        font-weight: 600;
        margin-bottom: 10px;
      }
      .number {
        margin-top: 15px;
        margin-top: 15px;
        height: 18px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #c7c7c7;
        line-height: 18px;
      }
    }
  }

  .charts-box {
    width: 100%;
    margin-top: 10px;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;

    .charts-left {
      flex: 1;
      padding: 5px;

      .charts-left-right {
        height: 75px;
        flex: 1;
        display: flex;
        flex-direction: row;

        .fl {
          flex: 1;
          // border: 1px solid red;
          margin-top: 15px;
          display: flex;

          .icon {
            width: 54px;
            height: 54px;

            img {
              width: 57px;
              height: 57px;
            }
          }

          .text {
            flex: 1;
            padding-left: 16px;
            .num-name {
              height: 18px;
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #000000;
              margin-top: 20px;
            }
            .num {
              width: 66px;
              height: 14px;
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #4092fb;
            }
          }
        }
      }
    }

    .charts-right {
      width: 100%;
      flex: 1;
      padding: 5px;
    }
  }
}
</style>
